<template>
  <view class="container">
    <view class="segment-control">
      <uni-segmented-control :current="currentSegment" :values="['计次项目', '扣次记录']" @clickItem="onSegmentChange"
        activeColor="#4cd964" class="segmented-control"></uni-segmented-control>
    </view>
    <view class="content">
      <!-- 左侧：会员信息和搜索 -->
      <view class="left-side">
        <view class="search-box">
          <input type="text" placeholder="[F2]刷卡或输入卡号" class="search-input" v-model="card_number" />
          <button class="search-button" size="mini" @click="search">搜索</button>
        </view>
        <view class="cart-list" v-if="currentSegment === 0">
          <view v-for="item in cart" :key="item.id" class="cart-item">
            <view class="item-details">
              <text>{{ item.name }}</text>
              <text>￥{{ item.price }}</text>
              <text>数量：{{ item.quantity }}</text>
            </view>
            <view class="item-controls">
              <button @click="decreaseQuantity(item)" size="mini">-</button>
              <button @click="increaseQuantity(item)" size="mini">+</button>
              <button @click="removeItemFromCart(item)" size="mini">删除</button>
            </view>
          </view>
        </view>

        <view class="order-summary" v-if="currentSegment === 0">
          <view class="" style="margin-left: 20px;margin-top: 15px;">
            <view class="summary-item">合计数量：{{ totalQuantity }}</view>
            <view class="summary-item">合计金额：￥{{ totalAmount }}</view>
          </view>
        </view>
        <view class="button-group bottom-buttons" v-if="currentSegment === 0">
          <button class="clear-button" size="mini" @click="clearCart">清空[Del]</button>
          <button class="charge-button" size="mini" @click="deductTimes">扣次[F5]：￥{{ totalAmount }}</button>
        </view>
      </view>

      <!-- 右侧：会员计次项目 -->
      <view class="right-side" v-if="currentSegment === 0">
        <view v-if="cardProjects.length > 0" class="item-container">
          <view class="item-list">
            <view class="item" v-for="item in cardProjects" :key="item.id" @click="addItemToCart(item)">
              <view class="item-name">{{ item.name }}</view>
              <view class="item-price">￥{{ item.price }}/次</view>
              <view class="item-quantity">剩余次数：{{ item.remaining }}</view>
            </view>
          </view>
        </view>
        <view v-else class="no-data">无相关计次项目</view>
      </view>

      <!-- 扣次记录 -->
      <view class="right-side" v-if="currentSegment === 1">
        <view v-if="deductRecords.length > 0" class="item-container">
          <view class="item-list">
            <view class="item" v-for="record in deductRecords" :key="record.id">
              <view class="item-name">{{ record.project_name }}</view>
              <view class="item-quantity">扣次数量：{{ record.quantity }}</view>
              <view class="item-time">时间：{{ record.time }}</view>
            </view>
          </view>
        </view>
        <view v-else class="no-data">无扣次记录</view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      card_number: "",
      cart: [],
      cardProjects: [],
      deductRecords: [],
      currentSegment: 0 // 默认显示计次项目
    };
  },
  computed: {
    totalQuantity() {
      return this.cart.reduce((sum, item) => sum + Number(item.quantity), 0);
    },
    totalAmount() {
      return this.cart.reduce((sum, item) => sum + Number(item.total), 0);
    }
  },
  methods: {
    async search() {
      if (this.currentSegment === 0) {
        // 搜索会员相关计次项目
        const res = await this.$myRuquest({
          url: '/index/plugin.foreground/search_card_projects',
          method: 'POST',
          data: {
            card_number: this.card_number
          }
        });
        if (res.data.code === 200) {
          this.cardProjects = res.data.data;
        } else {
          uni.showToast({
            title: res.data.info,
            duration: 3000,
            icon: 'none'
          });
        }
      } else {
        // 搜索扣次记录
        const res = await this.$myRuquest({
          url: '/index/plugin.foreground/get_deduct_records',
          method: 'POST',
          data: {
            card_number: this.card_number
          }
        });
        if (res.data.code === 200) {
          this.deductRecords = res.data.data;
        } else {
          uni.showToast({
            title: res.data.info,
            duration: 3000,
            icon: 'none'
          });
        }
      }
    },
    clearCart() {
      this.cart = [];
    },
    async deductTimes() {
      // 提交扣次请求
      const res = await this.$myRuquest({
        url: '/index/plugin.foreground/deduct_times',
        method: 'POST',
        data: {
          card_number: this.card_number,
          cart: this.cart
        }
      });
      if (res.data.code === 200) {
        uni.showToast({
          title: '扣次成功',
          duration: 3000,
          icon: 'none'
        });
        this.clearCart();
        this.search();
      } else {
        uni.showToast({
          title: '扣次失败: ' + res.data.info,
          duration: 3000,
          icon: 'none'
        });
      }
    },
    addItemToCart(item) {
      const cartItem = this.cart.find(cartItem => cartItem.id === item.id);
      if (cartItem) {
        cartItem.quantity++;
        cartItem.total = cartItem.quantity * cartItem.price;
      } else {
        this.cart.push({ ...item, quantity: 1, total: item.price });
      }
    },
    removeItemFromCart(item) {
      const index = this.cart.findIndex(cartItem => cartItem.id === item.id);
      if (index !== -1) {
        this.cart.splice(index, 1);
      }
    },
    increaseQuantity(item) {
      item.quantity++;
      item.total = item.quantity * item.price;
    },
    decreaseQuantity(item) {
      if (item.quantity > 1) {
        item.quantity--;
        item.total = item.quantity * item.price;
      }
    },
    onSegmentChange(event) {
      this.currentSegment = event.currentIndex;
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.segment-control {
  margin-bottom: 10px;
  background-color: #fff;
  padding: 20px;
}

.segmented-control {
  padding-left: 20px;
  padding-right: 20px;
}

.content {
  display: flex;
  flex: 1;
}

.left-side {
  flex: 1;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-right: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.cart-list {
  flex: 1;
  overflow-y: auto;
  margin-top: 20px;
}

.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  margin-bottom: 10px;
}

.item-details {
  flex: 1;
}

.item-controls {
  display: flex;
  gap: 5px;
}

.order-summary {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
}

.summary-item {
  font-size: 14px;
  color: #333;
}

.button-group.bottom-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.clear-button,
.charge-button {
  background-color: #4cd964;
  color: white;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 4px;
  flex: 1;
  margin: 5px;
}

.clear-button:hover,
.charge-button:hover {
  background-color: #45c853;
}

.right-side {
  flex: 2;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
}

.search-box {
  display: flex;
  margin-bottom: 20px;
}

.search-input {
  flex: 1;
  padding: 13px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  outline: none;
}

.search-button {
  background-color: #4cd964;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 0 4px 4px 0;
  margin-left: 10px;
}

.search-button:hover {
  background-color: #45c853;
}

.item-container {
  display: flex;
  flex-direction: column;
}

.item-list {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
}

.item {
  background-color: #ecf9ef;
  border: 1px solid darkgray;
  padding: 0px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin: 10px;
  flex: 1 1 calc(33.333% - 20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.item:hover {
  background-color: #4cd;
}

.item-name,
.item-price,
.item-quantity {
  margin: 5px 0;
}

.no-data {
  text-align: center;
  color: #999;
  padding: 20px 0;
}
</style>
